<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 560px;
            height: 312px;
            background-color: rgb(249, 247, 248);
            border: 1px solid rgb(222, 222, 222);
            margin-left: 10px;
            margin-top: 10px;
        }

        .left {
            width: 456px;
            float: left;
        }

        .left img {
            width: 440px;
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right {
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right img {
            width: 95px;
            height: 62px;
            margin-top: 8px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"><img src="images/托尔.jpg" /></div>
        <div class="right">
            <img src="images/托尔.jpg" />
            <img src="images/托尔2.jpg" />
            <img src="images/托尔3.jpg" />
            <img src="images/托尔4.jpg" />
        </div>
    </div>
</body>
<script>
    // 1、自动切换 图片
    let timer;
    let num = 0;
    let leftImg = document.querySelector('.left img')
    let imgList = document.querySelectorAll('.right img')
    let right = document.querySelector('.right')
    //初始化
    function init(num) {
        timer = setInterval(() => {
            num = num == imgList.length ? 0 : num
            leftImg.src = imgList[num].src
            num++
        }, 1000);
    }
    init(num)
    // 2、鼠标移入右侧的图片 左边切换到对应的图片  鼠标移出  以当前的图片 自动继续切换图片
    right.addEventListener('mouseenter', e => {
        //当选中的元素为img时，触发事件
        if (e.target.attributes[0].nodeName == 'src') {
            leftImg.src = e.target.src;
            clearInterval(timer)
            //获取选中的img在列表中索引
            num = [...imgList].indexOf(e.target)
            imgList.forEach(v => v.style.opacity = '.5');
            imgList[num].style.opacity = '1'
        }
    }, true)
    right.addEventListener('mouseleave', e => {
        if (e.target.attributes[0].nodeName == 'src') {
            num = [...imgList].indexOf(e.target)
            init(num)
        }
        //完全离开右侧div时所有透明度为1
        if (e.target == right)
            imgList.forEach(v => v.style.opacity = '1');
    }, true)
</script>